<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>作业</title>
    <script src="/Jscript/common.js"></script>
    <script>

        let data = {
            degree : [
                {id : 1, value : "小学",select :true},
                {id : 2, value : "初中",select :false},
                {id : 3, value : "高中",select :false},
                {id : 4, value : "大学",select :false},
                {id : 5, value : "研究生",select :false}
            ],
            province : [
                {id:1, value:"湖南省", select:false},
                {id:2, value:"湖北省", select:false}
            ],
            city : {
                "湖南省" : [
                    {id:1, value:"长沙市", select:false},
                    {id:2, value:"株洲市", select:false},
                    {id:3, value:"湘潭市", select:false},
                    {id:4, value:"衡阳市", select:false},
                    {id:5, value:"邵阳市", select:false},
                    {id:6, value:"岳阳市", select:false},
                    {id:7, value:"常德市", select:false},
                    {id:8, value:"张家界市", select:false},
                    {id:9, value:"益阳市", select:false},
                    {id:10, value:"郴州市", select:false},
                    {id:11, value:"永州市", select:false},
                    {id:12, value:"怀化市", select:false},
                    {id:13, value:"娄底市", select:false},
                    {id:14, value:"湘西土家族苗族自治州", select:false}
                    ],
                "湖北省" : [
                    {id:1, value:"武汉市", select:false},
                    {id:2, value:"黄石市", select:false},
                    {id:3, value:"襄阳市", select:false},
                    {id:4, value:"荆州市", select:false},
                    {id:5, value:"宜昌市", select:false},
                    {id:6, value:"十堰市", select:false},
                    {id:7, value:"孝感市", select:false},
                    {id:8, value:"荆门市", select:false},
                    {id:9, value:"鄂州市", select:false},
                    {id:10, value:"黄冈市", select:false},
                    {id:11, value:"咸宁市", select:false},
                    {id:12, value:"随州市", select:false},
                    {id:13, value:"恩施土家族苗族自治州", select:false}
                ],
            },
            user : {
                name : null,
                age : null,
                degree : null,
                p_address : null,
                c_address : null,
                sex : null,
                height : null,
                hobby : null,
                dream : null
            }
        }

        window.onload = function(){
            debugger;
            //初始化赋值学历
            initSelectMethod("sel_degree",data.degree);

            //加载对应的省级地区
            initSelectMethod("sel_province_address",data.province);

            let arr = afterSubmitDealMethod();
            //回填部分数据
            if (arr[0] != null && arr[1] !=null){
                document.getElementById("name").value=decodeURIComponent(arr[0].slice(5));
                document.getElementById("age").value=arr[1].slice(4);
                document.getElementById("height").value=decodeURIComponent(arr[6].slice(7));
                document.getElementById("hobby").value=decodeURIComponent(arr[7].slice(6));
                document.getElementById("dream").value=decodeURIComponent(arr[8].slice(6));
                document.getElementById("name").disabled="true";
                document.getElementById("age").disabled="true";
                document.getElementById("userFormSubmit").disabled="true";
            }
        }
        function afterSubmitDealMethod() {
            let name, value;
            let str = location.href; //取得整个地址栏
            let num = str.indexOf("?")
            str = str.substr(num + 1); //取得所有参数   stringvar.substr(start [, length ]
            let arr = str.split("&"); //各个参数放到数组里
            for (let i = 0; i < arr.length; i++) {
                num = arr[i].indexOf("=");
                if (num > 0) {
                    name = arr[i].substring(0, num);
                    value = arr[i].substr(num + 1);
                    this[name] = value;
                }
            }
            console.log(arr);
            return arr;
        }
        function checkFormData() {
            debugger;
            if (data.user.p_address == ""|| data.user.c_address == "")
            {alert("请输入您的地址");return false;}
            //用正则表达式判断输入的年龄是否符合要求
            let patt1 = /[0-9]/g;
            if (!patt1.test(user.age) || user.age<18) {alert("您输入的年龄不符合要求");return false;}
            return true;
        }
        function checkFormSubmitMethod() {
            debugger;
            //获取form表单
            let userForm = document.forms["userForm"];
            console.log(userForm);
            data.user.name = userForm["name"].value;
            data.user.sex = userForm["sex"].value;
            data.user.degree = userForm["degree"].value;
            data.user.p_address = userForm["p_address"].value;
            data.user.c_address = userForm["c_address"].value;
            data.user.height = userForm["height"].value;
            data.user.age = userForm["age"].value;
            data.user.hobby = userForm["hobby"].value;
            data.user.dream = userForm["dream"].value;
            return checkFormData();
        }


        //获取省级所对应的市级城市
        function addressSelectMethod(value) {
            debugger;
                let city_address = document.getElementById("sel_city_address");
                if (city_address.options.length != 1) {
                    city_address.options.length = 1;
                }
            initSelectMethod("sel_city_address",data.city[value])
        }

    </script>

</head>
<body>

<form action="" method="get" name="userForm"  onsubmit="return checkFormSubmitMethod()">
    <span>姓名：</span>
    <input type="text" id="name" name="name" value="" required="required"><br>

    <span>年龄：</span>
    <input type="age" name="age" id="age" value="" required="required">(年龄必须为数字且大于等于18)<br>

    <span>学历：</span>
    <select name="degree" id="sel_degree"
            style="margin-right: 10px; width: 170px">
    </select><br>

    <span>地址：</span>
    <select name="p_address" id="sel_province_address" onchange="addressSelectMethod(this.value)"
            style="margin-right: 10px; width: 170px">
        <option value="">
            请选择您所在的省份
        </option>
    </select>
    <select name="c_address" id="sel_city_address"
            style="margin-right: 10px; width: 170px">
        <option value="">
            请选择您所在的城市
        </option>
    </select>
    <br>

    <span>性别：</span>
    <span style="margin-left: 20px; margin-right: 10px">男</span>
    <input type='radio' name='sex' value='男' checked/>
    <span style="margin-left: 35px; margin-right: 10px">女</span>
    <input type='radio' name='sex' value='女'/><br>

    <span>身高：</span>
    <input type="text" id="height" name="height" value="" maxlength="3" required="required"><br>

    <span>爱好：</span>
    <input type="text" id="hobby" name="hobby"  value="" maxlength="10" required="required"><br>

    <span>梦想：</span>
    <input type="text" id="dream" name="dream" value="" maxlength="20" required="required"><br>

    <input type="submit" value="提交" id="userFormSubmit">
</form>

</body>
</html>
